<template>
  <div>
    <div class="bread">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>学员项目管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- search -->
    <div class="search">
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-button icon="el-icon-search"></el-button>
      <!-- 选择班级 -->
      <template class="selset">
        <el-form ref="Classform" :model="ClassForm">
          <el-form-item label="选择班级">
            <el-select
              v-model="ClassForm.selectedClass"
              placeholder="请选择"
              @change="selectClasses"
              @click.native="getAllClasses"
            >
              <el-option label="全部" value="all"></el-option>
              <el-option v-for="item in classes" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <el-button type="success" plain>成功按钮</el-button>
      <el-button type="text" @click="dialogFormVisible = true">添加学员信息</el-button>
    </div>
    <!-- 表格 -->
    <template>
      <el-table
        :data="students"
        style="width: 100%"
        border
        v-loading="studentsTableLoading"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-table-column label="头像" width="100" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.avatarUrl" alt="图片走丢了..." width="100%">
          </template>
        </el-table-column>
        <el-table-column prop="class" label="班级" width="55"></el-table-column>
        <el-table-column prop="name" label="姓名" width="70"></el-table-column>
        <el-table-column prop="age" label="年龄" width="50"></el-table-column>
        <el-table-column prop="city" label="城市" width="50"></el-table-column>
        <el-table-column prop="degree" label="学历" width="50"></el-table-column>
        <el-table-column label="项目地址" width="180">
          <template slot-scope="scope">
            <a :href="scope.row.productUrl">{{scope.row.productUrl}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" width="80"></el-table-column>
        <el-table-column prop="cTime" label="创建时间" width="189"></el-table-column>
        <el-table-column prop="token" label="token" width="80"></el-table-column>
        <el-table-column label="操作" width="75">
          <template slot-scope="scope">
            <span>
              <el-button type="text" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
            </span>
            <span>
              <el-button type="text" @click="delstu(scope.row.sId)">删除</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="100"
        style="margin-top:10px;text-align:center;"
      ></el-pagination>
      <!-- 添加学员信息 -->
      <el-dialog title="添加学员信息" :visible.sync="dialogFormVisible">
        <el-form :model="Stuform" :rules="addStuRules" ref="addStuRulesForm">
          <el-form-item label="头像" :label-width="formLabelWidth">
            <el-upload
              class="upload-demo"
              :limit="1"
              action="http://106.12.79.128:1901/students/uploadStuAvatar"
              name="avatar"
              :show-file-list="showAvatar"
              :on-success="uploadStuAvatar"
              list-type="picture"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <el-input v-show="false" v-model="Stuform.avatarUrl" placeholder></el-input>
          </el-form-item>
          <el-form-item label="班级" :label-width="formLabelWidth" prop="class">
            <el-input v-model="Stuform.class" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
            <el-input v-model="Stuform.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
            <el-input v-model="Stuform.age" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="居住城市" :label-width="formLabelWidth" prop="city">
            <el-input v-model="Stuform.city" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="学历" :label-width="formLabelWidth" prop="degree">
            <el-input v-model="Stuform.degree" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="项目地址" :label-width="formLabelWidth" prop="productUrl">
            <el-input v-model="Stuform.productUrl" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="个人描述" :label-width="formLabelWidth" prop="description">
            <el-input v-model="Stuform.description" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="token" :label-width="formLabelWidth">
            <el-input v-model="Stuform.token" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmClick('addStuRulesForm')">确认</el-button>
        </div>
      </el-dialog>
    </template>
  </div>
</template>
<script>
import { mapActions, mapState } from "vuex";
import { delstu, addstu, getClasses, getstulist, editStuInfo } from "@/api";
export default {
  created() {},
  data() {
    return {
      showAvatar: true,
      studentsTableLoading: true,
      ClassForm: {
        selectedClass: "",
        class: "H51901"
      },
      input: "",
      value: "",
      dialogFormVisible: false,
      dialogEvents: "Addstu",
      Stuform: {
        class: "",
        name: "",
        age: "",
        city: "",
        degree: "",
        productUrl: "",
        description: "",
        avatarUrl: "",
        cTime: "",
        token: ""
      },
      formLabelWidth: "120px",
      addStuRules: {
        class: [{ required: true, message: "请输入班级", trigger: "blur" }],
        name: [{ required: true, message: "请输入名字", trigger: "blur" }],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        city: [{ required: true, message: "请输入居住城市", trigger: "blur" }],
        degree: [{ required: true, message: "请输入学历", trigger: "blur" }],
        productUrl: [
          { required: true, message: "请输入项目地址", trigger: "blur" }
        ],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" }
        ]
      },
      classes: [],
      students: []
    };
  },
  computed: {
    ...mapState("list", ["getStulist"])
  },
  methods: {
    //加载图片
    uploadStuAvatar(res) {
      this.Stuform.avatarUrl = res.avatarUrl;

      console.log(res);
    },
    ...mapActions("list", ["getstulist"]),

    //点击编辑按钮触发事件
    handleEdit(index, row) {
      this.dialogEvents = "editStu";
      this.dialogFormVisible = true;
      let Stuform = JSON.stringify(row);
      this.Stuform = JSON.parse(Stuform);
      //把需要更新的index存到vuex 以便于让后续的方法(editStuInfo)dom进行更新
      this.$store.commit("setEditIndex", index);
      this.$store.commit("setEditRow", this.Stuform);
    },
    //更新学员信息
    editStu() {
      let updated = this.Stuform;
      editStuInfo(updated).then(res => {
        if (res.data.state) {
          this.dialogFormVisible = false;
          let editIndex = this.$store.state.editIndex;
          let editRow = this.$store.state.editRow;
          this.$set(this.students, editIndex, editRow);
          this.$message({
            type: "success",
            message: "修改成功!"
          });
        } else {
          this.$message({
            type: "error",
            message: "修改出错"
          });
        }
      });
    },
    //删除学员信息
    delstu(data = {}, index) {
      this.$confirm("此操作将永久删除学员, 是否继续?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delstu(data).then(res => {
          if (res.data.state) {
            this.students.splice(index, 1);
            this.getStuList();
            this.$message({
              message: "恭喜你，删除成功!",
              type: "success"
            });
          } else {
            this.$message({
              showClose: true,
              message: "删除出错",
              type: "error"
            });
          }
        });
      });
    },
    //添加学员信息
    Addstu() {
      let data = this.Stuform; // 获取学员信息
      addstu(data).then(res => {
        if (res.data.state) {
          let cTime = res.headers.date;
          data.cTime = cTime;
          this.getStuList();
          this.dialogFormVisible = false;
          this.$message({
            message: "恭喜你，添加成功!",
            type: "success"
          });
        } else {
          this.$message({
            message: "添加出错",
            type: "error"
          });
        }
      });
    },
    //获取班级列表
    getAllClasses() {
      let _this = this;
      getClasses().then(res => {
        _this.classes = res.data.data;
      });
    },
    selectClasses() {
      //再次发送请求 获取学员信息
      let selected = this.ClassForm.selectedClass;
      let query =
        selected === "all"
          ? {}
          : {
              class: selected
            };
      this.getStuList(query);
    },
    //获取学员信息列表
    getStuList(query = {}) {
      let _this = this;
      getstulist(query).then(res => {
        if (res.data.state) {
          _this.students = res.data.data;
          _this.studentsTableLoading = false;
        }
      });
    },
    //编辑或添加确认按钮
    confirmClick(formName) {
      this.$refs[formName].validate(valid => {
        console.log(valid);
        if (valid) {
          let dialogEventName = this.dialogEvents;
          this[dialogEventName]();
        } else {
          this.$alert("添加学员信息失败", "提示", {
            confirmButtonText: "确定"
          });
        }
      });
    }
  },
  mounted() {
    //调用获取列表信息
    this.getStuList();
  }
};
</script>